<template>
  <div class="lottery-record-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form
        :inline="true"
        :model="searchForm"
        class="search-form"
      >
        <el-form-item label="用户ID">
          <el-input
            v-model="searchForm.userId"
            placeholder="请输入用户ID"
            clearable
            style="width: 180px"
          />
        </el-form-item>

        <el-form-item label="奖品类型">
          <el-select
            v-model="searchForm.prizeType"
            placeholder="请选择奖品类型"
            clearable
            style="width: 150px"
          >
            <el-option
              label="全部"
              value=""
            />
            <el-option
              label="积分"
              value="积分"
            />
            <el-option
              label="谢谢惠顾"
              value="谢谢惠顾"
            />
            <el-option
              label="自定义奖品"
              value="自定义奖品"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button @click="resetSearch">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 - 按照角色管理表格样式设计 -->
    <div class="table-container">
      <el-table
        :data="currentPageData"
        border
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold'
        }"
        :row-style="{height: '60px'}"
        empty-text="暂无抽奖记录"
      >
        <!-- ID列 -->
        <el-table-column
          prop="id"
          label="ID"
          width="80"
          align="center"
          fixed="left"
        />

        <!-- 用户ID列 -->
        <el-table-column
          prop="userId"
          label="用户ID"
          width="120"
          align="center"
        />

        <!-- 用户名列 -->
        <el-table-column
          prop="username"
          label="用户名"
          align="center"
        />

        <!-- 头像列 -->
        <el-table-column
          label="头像"
          width="120"
          align="center"
        >
          <template #default="{row}">
            <el-avatar
              :size="40"
              :src="row.avatar || defaultAvatar"
            />
          </template>
        </el-table-column>

        <!-- 奖品ID列 -->
        <el-table-column
          prop="prizeId"
          label="奖品ID"
          width="100"
          align="center"
        />

        <!-- 奖品类型列 -->
        <el-table-column
          prop="prizeType"
          label="奖品类型"
          width="150"
          align="center"
        >
          <template #default="{row}">
            <el-tag
              :type="row.prizeType === '积分' ? 'success' : row.prizeType === '谢谢惠顾' ? 'danger' : 'warning'"
              size="medium"
            >
              {{ row.prizeType }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 奖品名称列 -->
        <el-table-column
          prop="prizeName"
          label="奖品名称"
          width="180"
          align="center"
        />

        <!-- 奖品图片列 -->
        <el-table-column
          label="奖品图片"
          width="180"
          align="center"
        >
          <template #default="{row}">
            <el-image
              v-if="row.prizeImage"
              style="width: 50px; height: 50px"
              :src="row.prizeImage"
              :preview-src-list="[row.prizeImage]"
              fit="cover"
              hide-on-click-modal
            >
              <div
                slot="error"
                class="image-slot"
              >
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <!-- 抽奖时间列 -->
        <el-table-column
          prop="drawTime"
          label="抽奖时间"
          width="180"
          align="center"
        />

        <!-- 操作列 -->
        <el-table-column
          label="操作"
          width="200"
          align="center"
          fixed="right"
        >
          <template #default="{row}">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 - 移除卡片样式并修复跳转功能 -->
    <div class="pagination-area">
      <span class="total-records">共 {{ filteredRecords.length }} 条记录</span>

      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="filteredRecords.length"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
      />

      <el-select
        v-model="pagination.pageSize"
        size="mini"
        style="width: 100px; margin: 0 10px"
        @change="handleSizeChange"
      >
        <el-option
          v-for="item in [10, 20, 50, 100]"
          :key="item"
          :label="`${item}条/页`"
          :value="item"
        />
      </el-select>

      <div class="page-jump">
        <span>前往</span>
        <el-input
          v-model.number="jumpPage"
          size="mini"
          style="width: 50px; margin: 0 5px"
          @keyup.enter.native="handleJumpPage"
        />
        <span>页</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LotteryRecord',
  data () {
    return {
      searchForm: {
        userId: '',
        prizeType: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10
      },
      jumpPage: 1,
      defaultAvatar: require('@/assets/img/z.jpg'),
      records: [
        // 示例数据保持不变
        {
          id: 2033,
          userId: 11574,
          username: 'Diamond.',
          avatar: '',
          prizeId: 3,
          prizeType: '积分',
          prizeName: '积分',
          prizeImage: '',
          drawTime: '2025-06-26 10:15:53'
        },
        {
          id: 2033,
          userId: 11574,
          username: 'Diamond.',
          avatar: '',
          prizeId: 3,
          prizeType: '积分',
          prizeName: '积分',
          prizeImage: '',
          drawTime: '2025-06-26 10:15:53'
        },
        {
          id: 2032,
          userId: 11574,
          username: 'Diamond.',
          avatar: '',
          prizeId: 1,
          prizeType: '积分',
          prizeName: '积分',
          prizeImage: '',
          drawTime: '2025-06-26 10:15:48'
        },
        {
          id: 2031,
          userId: 11574,
          username: 'Diamond.',
          avatar: '',
          prizeId: 5,
          prizeType: '积分',
          prizeName: '积分',
          prizeImage: '',
          drawTime: '2025-06-26 10:15:40'
        },
        {
          id: 2030,
          userId: 16999,
          username: 'X',
          avatar: '',
          prizeId: 2,
          prizeType: '谢谢惠顾',
          prizeName: '谢谢惠顾',
          prizeImage: '',
          drawTime: '2025-06-19 10:07:29'
        },
        {
          id: 2029,
          userId: 5097,
          username: '软件定制开发陈伟',
          avatar: '',
          prizeId: 1,
          prizeType: '积分',
          prizeName: '积分',
          prizeImage: '',
          drawTime: '2025-06-18 17:23:49'
        },
        {
          id: 2028,
          userId: 5097,
          username: '软件定制开发陈伟',
          avatar: '',
          prizeId: 2,
          prizeType: '谢谢惠顾',
          prizeName: '谢谢惠顾',
          prizeImage: '',
          drawTime: '2025-06-18 17:21:43'
        },
        {
          id: 2027,
          userId: 17617,
          username: 'LF_1953033',
          avatar: '',
          prizeId: 8,
          prizeType: '自定义奖品',
          prizeName: '蓝牙耳机',
          prizeImage: '',
          drawTime: '2025-06-17 21:30:49'
        },
        {
          id: 2026,
          userId: 17617,
          username: 'LF_1953033',
          avatar: '',
          prizeId: 1,
          prizeType: '积分',
          prizeName: '积分',
          prizeImage: '',
          drawTime: '2025-06-17 21:30:43'
        },
        {
          id: 2025,
          userId: 17617,
          username: 'LF_1953033',
          avatar: '',
          prizeId: 3,
          prizeType: '积分',
          prizeName: '积分',
          prizeImage: '',
          drawTime: '2025-06-17 21:30:40'
        },
        {
          id: 2024,
          userId: 17726,
          username: 'yyyy',
          avatar: '',
          prizeId: 2,
          prizeType: '谢谢惠顾',
          prizeName: '谢谢惠顾',
          prizeImage: '',
          drawTime: '2025-06-17 21:30:35'
        }
      ],
      filteredRecords: []
    }
  },
  computed: {
    currentPageData () {
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      return this.filteredRecords.slice(start, end)
    }
  },
  created () {
    this.filteredRecords = [...this.records]
  },
  methods: {
    handleSearch () {
      this.pagination.currentPage = 1
      this.filteredRecords = this.records.filter(record => {
        if (this.searchForm.userId && !record.userId.toString().includes(this.searchForm.userId)) {
          return false
        }
        if (this.searchForm.prizeType && record.prizeType !== this.searchForm.prizeType) {
          return false
        }
        return true
      })
    },
    resetSearch () {
      this.searchForm = {
        userId: '',
        prizeType: ''
      }
      this.pagination.currentPage = 1
      this.filteredRecords = [...this.records]
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    handleJumpPage () {
      const page = parseInt(this.jumpPage)
      const maxPage = Math.ceil(this.filteredRecords.length / this.pagination.pageSize)

      if (!isNaN(page) && page >= 1 && page <= maxPage) {
        this.pagination.currentPage = page
      } else {
        this.$message.warning(`请输入1-${maxPage}之间的页码`)
        this.jumpPage = this.pagination.currentPage
      }
    },
    showDetail (row) {
      // 显示详情逻辑
      this.$message.info(`查看记录ID为 ${row.id} 的详情`)
    },
    handleDelete (id) {
      this.$confirm('确定删除这条抽奖记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.records = this.records.filter(item => item.id !== id)
        this.filteredRecords = this.filteredRecords.filter(item => item.id !== id)
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
.lottery-record-container {
  padding: 20px;
  background: #fff;
  min-width: 1200px;
}

.search-area {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  align-items: center;
}

.search-form .el-form-item {
  margin-bottom: 0;
  margin-right: 15px;
}

.table-container {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-meta {
  margin-left: 10px;
  text-align: left;
}

.username {
  font-weight: 500;
}

.user-id {
  font-size: 12px;
  color: #909399;
}

.prize-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-details {
  margin-left: 10px;
  text-align: left;
}

.prize-name {
  margin-bottom: 5px;
}

/* 分页区域样式 */
.pagination-area {
  margin-top: 20px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.total-records {
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
}

.page-jump {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #c0c4cc;
  font-size: 20px;
}

/* 响应式调整 */
@media (max-width: 1600px) {
  .lottery-record-container {
    min-width: 100%;
    overflow-x: auto;
  }

  .search-form {
    flex-wrap: wrap;
  }

  .search-form .el-form-item {
    margin-bottom: 10px;
  }

  .pagination-area {
    flex-wrap: wrap;
    justify-content: center;
  }

  .total-records {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>
